<template>
	<el-row>
		<el-col :span="4">
			<el-menu
				background-color="#545c64"
				text-color="#fff"
				active-text-color="#ffd04b"
			>
				<div v-for="(route, index) in routes" :key="route.name">
					<el-menu-item v-if="!route.hidden" :index="index">
						<router-link :to="route.path" class="link">{{
							route.meta && route.meta.title
						}}</router-link>
					</el-menu-item>
				</div>
			</el-menu>
		</el-col>
		<el-col :span="20"><router-view /></el-col>
	</el-row>
</template>

<script>
import { routes } from './router'

export default {
	name: 'App',
	data() {
		return {
			routes,
		}
	},
}
</script>

<style>
.link {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
}
</style>
